<template>
  <div v-loading="loading" class="link-wrap">
    <EmptyData v-if="res?.length === 0" />
    <template v-else v-for="item in res" :key="item.id">
      <LinkItem :text="item.urlName" :href="item.url" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { getCommonlyLinks } from '@screen/apis/index'
import LinkItem from './LinkItem.vue'
import useFetch from '@/hooks/useFetch'
import EmptyData from '../EmptyData.vue'

const { loading, res } = useFetch<Record<string, any>>(
  getCommonlyLinks,
  {},
  true,
  false,
)
</script>

<style lang="scss" scoped>
.link-wrap {
  padding: vh(1) vw(16) vh(8);
}
</style>
